import Sprite from '../base/sprite';
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';
import Emitter from '../libs/tinyemitter';
const BACKGROUND_WIDTH = 256;
const BACKGROUND_HEIGHT = 256;



export const pics = Array.from(Array(12), (e, index) => {

  const img = wx.createImage();
  img.src = `images/card${index + 1}.png`;

  return img
})



/**
 * 游戏背景类
 * 提供 update 和 render 函数实现无限滚动的背景功能
 */
export default class Card extends Emitter {
  left = 0
  top = 0
  disabled = false
  clipOffsetX = GameGlobal.px2dpr(2)
  clipOffsetY = GameGlobal.px2dpr(2)
  clipRadius = GameGlobal.px2dpr(6)
  img = null
  constructor(left = 0, top = 0, index = 0) {
    super();
    console.log('pics[index]', index, pics[index])
    // super(`images/card${index}.png`, BACKGROUND_WIDTH, BACKGROUND_HEIGHT);
    this.img = pics[index]

    // imgSrc = '', width = 0, height = 0, x = 0, y = 0

    this.width = BACKGROUND_WIDTH;
    this.height = BACKGROUND_HEIGHT;
    this.x = 0;
    this.y = 0;
    this.visible = true;


    this.left = left;
    this.top = top;


  }
  setVisible(ctx) {
    // 还原到之前保存的状态
    // ctx.restore();
    // ctx.clearRect(this.left, this.top, GameGlobal.card.width, GameGlobal.card.height); // 清空画布
  }


  update() {
    if (GameGlobal.databus.isGameOver) {
      return;
    }


  }

  renderOverlay(ctx) {
    // 保存当前状态
    this.disabled = true


    var offsetX = this.clipOffsetX
    var offsetY = this.clipOffsetY
    var x = this.left; // 圆角矩形左上角的 x 坐标
    var y = this.top; // 圆角矩形左上角的 y 坐标
    var width = GameGlobal.card.width; // 圆角矩形的宽度
    var height = GameGlobal.card.height; // 圆角矩形的高度
    var radius = this.clipRadius; // 圆角的半径

    this.renderClip(ctx, x, y, width + offsetX, height + offsetY, radius)
    // 绘制遮罩层
    ctx.fillStyle = "rgba(0,0,0,0.6)";
    ctx.fillRect(this.left, this.top, GameGlobal.card.width, GameGlobal.card.height); //
    ctx.restore();
  }
  renderClip(ctx, x, y, width, height, radius) {
    ctx.save();
    // y = 10;
    // 开始路径绘制
    ctx.beginPath();
    ctx.moveTo(x + radius, y); // 移动到左上角并开始绘制路径
    ctx.lineTo(x + width - radius, y); // 绘制顶部直线到右上角
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // 绘制右上角圆弧
    ctx.lineTo(x + width, y + height - radius); // 绘制右侧直线到右下角
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // 绘制右下角圆弧
    ctx.lineTo(x + radius, y + height); // 绘制底部直线到左下角
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // 绘制左下角圆弧
    ctx.lineTo(x, y + radius); // 绘制左侧直线到左上角
    ctx.quadraticCurveTo(x, y, x + radius, y); // 绘制左上角圆弧
    ctx.closePath(); // 闭合路径
    ctx.clip(); // 使用当前路径作为裁剪区域
  }
  /**
   * 背景图重绘函数
   */
  render(ctx, text = '') {
    var offsetX = this.clipOffsetX
    var offsetY = this.clipOffsetY
    var x = this.left; // 圆角矩形左上角的 x 坐标
    var y = this.top; // 圆角矩形左上角的 y 坐标
    var width = GameGlobal.card.width; // 圆角矩形的宽度
    var height = GameGlobal.card.height; // 圆角矩形的高度
    var radius = this.clipRadius; // 圆角的半径

    this.renderClip(ctx, x + offsetX, y + offsetY, width, height, radius)

    ctx.fillStyle = 'rgba(128,128,128,0.9)';
    ctx.fillRect(this.left + offsetX, this.top + offsetY, GameGlobal.card.width, GameGlobal.card.height);
    ctx.restore();


    this.renderClip(ctx, x, y, width, height, radius)

    ctx.fillStyle = 'white';
    ctx.fillRect(this.left, this.top, GameGlobal.card.width, GameGlobal.card.height);
    ctx.drawImage(
      this.img,
      0,
      0,
      this.width,
      this.height,
      this.left,
      this.top,
      GameGlobal.card.width,
      GameGlobal.card.height
    );

    ctx.restore();

    /* ctx.fillStyle = "#ffffff";
    ctx.font = GameGlobal.px2dpr(20) + "px Arial";
    ctx.fillText(
      `${this.left}-${GameGlobal.card.width}`,
      this.left,
      this.top
    ); */
  }
}
